<template>
	<view class="bg-white padding-top-sm">
		<view class="content" style="margin-top: 15rpx;">
			<view class="trade">
				<trade-martin ref="trade" :type="type" :isLoginOn="isLoginOn" v-if="strategy==0" v-on:changeStrategy="changeStrategy"></trade-martin>
				<trade-tent ref="trade" :type="type" v-else-if="strategy==1" v-on:changeStrategy="changeStrategy"></trade-tent>
				<trade-pagoda ref="trade" :type="type" v-else-if="strategy==2" v-on:changeStrategy="changeStrategy"></trade-pagoda>
				<trade-fixed ref="trade" :type="type" v-else-if="strategy==101" v-on:changeStrategy="changeStrategy"></trade-fixed>
				<trade-stop ref="trade" :type="type" v-else-if="strategy==102" v-on:changeStrategy="changeStrategy"></trade-stop>
				<trade-track ref="trade" :type="type" v-else-if="strategy==103" v-on:changeStrategy="changeStrategy"></trade-track>
			</view>
			<view class="position">
				<positionList v-on:depthChange="depthChange"></positionList>
			</view>
		</view>
		<view class="uni-gap"></view>
		<spotOkFixedOrderList v-if="strategy==101"></spotOkFixedOrderList>
		<spotOkStopOrderList v-else-if="strategy==102"></spotOkStopOrderList>
		<spotOkTrackOrderList v-else-if="strategy==103"></spotOkTrackOrderList>
		<spotOrderList v-else></spotOrderList>
		<uni-drawer :visible="drawerVisible" mask="false" mode="left" @close="closeDrawer">
			<marketDrawer :areaList="areaList" :marketList="marketList" @onSelect="mySelect"></marketDrawer>
		</uni-drawer>
	</view>
</template>

<script>
	var _self
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		uniDrawer
	} from '@dcloudio/uni-ui'
	import positionList from '../../components/spotPositionList.vue'
	import spotOrderList from '../../components/spotOrderList.vue'
	import spotOkFixedOrderList from '../../components/spotOkFixedOrderList.vue'
	import spotOkStopOrderList from '../../components/spotOkStopOrderList.vue'
	import spotOkTrackOrderList from '../../components/spotOkTrackOrderList.vue'
	import tradeMartin from '../../components/tradeMartin.vue'
	import tradePagoda from '../../components/tradePagoda.vue'
	import tradeTent from '../../components/tradeTent.vue'
	import tradeFixed from '../../components/tradeFixed.vue'
	import tradeStop from '../../components/tradeStop.vue'
	import tradeTrack from '../../components/tradeTrack.vue'
	import marketDrawer from '../../components/marketDrawer.vue'

	export default {
		onLoad() {
			_self = this
			_self.fresh()
		},
		onShow() {
			_self.isLoginOn = _self.checkLogin()
			if (_self.isLoginOn) {
				_self.fresh()
			}
			uni.setNavigationBarTitle({
				title: _self.getDefaultSpot().instrumentId
			})
		},
		onHide() {
			this.$refs.trade.onChangeType(1)
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				this.drawerVisible = true;
			} else {
				// uni.navigateTo({
				// 	url: "/pages/trade/kline/main?symbol=" + this.symbol
				// })
			}
		},
		components: {
			uniDrawer,
			positionList,
			spotOrderList,
			spotOkFixedOrderList,
			spotOkStopOrderList,
			spotOkTrackOrderList,
			tradeMartin,
			tradePagoda,
			tradeTent,
			tradeFixed,
			tradeStop,
			tradeTrack,
			marketDrawer
		},
		data() {
			return {
				isLoginOn: false,
				symbol: 'BTCUSDT',
				market: {},
				drawerVisible: false,
				scrollLeft: 0,
				areaList: [],
				marketList: [],
				instrument: null,
				depthValue: 1,
				type: 1,
				filter: {
					independence: false,
					isTransNav: true,
					navHeight: 35,
					titleColor: '#F0EFEF',
					themeColor: '#090909',
				},
				strategy: 0
			}
		},
		mounted() {
			_self.isLoginOn = _self.checkLogin()
			this.areaList = [{
				id: 1,
				name: "USDT"
			}];
			_self.marketList = _self.getSpotMarket()
		},
		computed: {},
		methods: {
			closeDrawer() {
				this.drawerVisible = false;
			},
			depthChange(e) {
				console.log("===============" + e + "==================")
			},
			result(val) {
				console.log('filter_result:' + JSON.stringify(val));
				this.strategy = val.strategy
			},
			changeStrategy(event) {
				_self.strategy = event.index
				// for (var i = 0; i < this.SpotStrategy.length; i++) {
				// 	if (event == this.SpotStrategy[i].id) {
				// 		console.log('is open status'+this.SpotStrategy[i].isOpen)
				// 		if(this.SpotStrategy[i].isOpen){
				// 			_self.strategy = event.index
				// 			console.log("change strategy :" + _self.strategy)
				// 		}						
				// 	} 
				// }						
			},
			mySelect(e) {
				_self.instrument = e;
				console.log("selelct e " + e)
				if (e != null) {
					uni.setNavigationBarTitle({
						title: e.instrumentId
					})
					_self.cacheDefaultSpot(e)
					_self.fresh()
				}
				console.log("=====================emit resh=====================")

				_self.closeDrawer();
			},
			fresh() {
				uni.$emit('spotMartinFresh')
				uni.$emit('spotPositionFresh')
				uni.$emit("spotOrderFresh")
			}

		}
	}
</script>

<style scoped>
	.content {
		margin-top: 20upx;
		display: flex;
	}

	.content .trade {
		width: 60%;
		padding-left: 20upx;
		padding-right: 20upx;
	}

	.content .position {
		width: 40%;
	}
</style>
